import React, { useState } from 'react';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { Icon, Text, TopNavigation, Divider } from '@ui-kitten/components';
import Svg, { Circle, G, Path } from 'react-native-svg';

const directions = ['up', 'right', 'down', 'left'];
const buttonSize = 60;
const buttonMargin = 5;
const buttonAngle = (Math.PI * 2) / directions.length;

const buttonPaths = directions.map((dir, index) => {
  const angle = index * buttonAngle;
  const x = Math.cos(angle) * (buttonSize + buttonMargin);
  const y = Math.sin(angle) * (buttonSize + buttonMargin);

  return (
    <Path
      key={dir}
      d={`M ${x} ${y} a ${buttonSize} ${buttonSize} 0 0 1 ${0- 2 * x} 0`}
      fill="transparent"
      stroke="#ccc"
      strokeWidth={2}
    />
  );
});

const CircularRemoteControl = ({ onButtonPress }) => {
  const [pressedButton, setPressedButton] = useState(null);

  const handleButtonPress = (direction) => {
    setPressedButton(direction);
    onButtonPress?.(direction);
  };

  const handleButtonRelease = () => {
    setPressedButton(null);
  };

  return (
    <View style={styles.container}>
      <Svg height={2 * (buttonSize + buttonMargin)} width={2 * (buttonSize + buttonMargin)}>
        <G>
          <Circle cx={buttonSize + buttonMargin} cy={buttonSize + buttonMargin} r={buttonSize} fill="#f5f5f5" />
          {buttonPaths}
        </G>
        {directions.map((dir, index) => {
          const angle = index * buttonAngle;
          const x = Math.cos(angle) * (buttonSize + buttonMargin);
          const y = Math.sin(angle) * (buttonSize + buttonMargin);

          return (
            <TouchableOpacity
              key={dir}
              onPressIn={() => handleButtonPress(dir)}
              onPressOut={handleButtonRelease}
              style={[
                styles.button,
                {
                  transform: [{ translateX: x }, { translateY: y }],
                  opacity: pressedButton === dir ? 0.8 : 1,
                },
              ]}
            >
              <Text style={[styles.buttonText, { transform: [{ rotate: `${angle * 180 / Math.PI}deg` }] }]}>
                {dir.toUpperCase()}
              </Text>
            </TouchableOpacity>
          );
        })}
      </Svg>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    justifyContent: 'center',
  },
  button: {
    position: 'absolute',
    backgroundColor: '#007aff',
    borderRadius: buttonSize,
    width: buttonSize,
    height: buttonSize,
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
    textTransform: 'uppercase',
  },
});

export default CircularRemoteControl;